<script setup>
    import {watch, ref} from "vue"
    // 父传子 接收父组件数据
    const props = defineProps({
        list: {
            type: Array,
            default: () => [],
        }
    })
    // 子传父 修改任务完成状态
    const emit = defineEmits()
    const startModify = (i) => {
        emit("modify" ,i)
    }
    // 子传父 删除任务
    const startDel = (i) => {
        // 删除前询问
        if(window.confirm("确定删除吗？")) {
            // 携带参数触发父组件自定义事件，间接触发删除函数进行删除
            emit("del", i)
        }
    }
</script>
<template>
    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" />
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">

            <li v-for="item, index in list" :key="item.id" :class="{completed: item.finished}">
                <div class="view">
                    <input class="toggle" type="checkbox" @click="startModify(index)" v-model="item.finished"/>
                    <label>{{ item.name }}</label>
                    <button class="destroy" @click="startDel(index)"></button>
                </div>
            </li>
        </ul>
    </section>
</template>


































